<template>
  <div class="dormManagement-container">
    <el-row class="header-btn">
      <el-col :span="12" class="editAdd">
        <el-button icon="el-icon-plus" type="primary" size="small" @click="addDialogVisible = true">
          添加
        </el-button>
        <el-button icon="el-icon-delete" type="danger" size="small" @click="handleDelete">
          批量删除
        </el-button>
      </el-col>
      <el-col :span="12" class="query">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <el-input
                size="small"
                v-model.trim="queryForm.departmentName"
                placeholder="请输入查询条件"
                clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" size="small" @click="queryData">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-table
        :data="dormitoryList"
        style="width: 100%"
        @expand-change="handleExpendRow"
    >
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table
              :data="scope.row.children"
              :header-cell-style="tableHeaderColor"
              style="width: 100%">
            <el-table-column
                sortable
                align="center"
                prop="roomNum"
                label="房间号">
            </el-table-column>
            <el-table-column
                align="center"
                prop="nowNumber"
                label="现有人数">
            </el-table-column>
            <el-table-column
                align="center"
                prop="maxNumber"
                label="可居住人数">
            </el-table-column>
            <el-table-column
                align="center" show-overflow-tooltip label="操作">
              <template slot-scope="scope">
                <el-button size="small" icon="el-icon-delete" type="danger" circle @click="handleDeleteRoom(scope.row.id)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip type="selection"></el-table-column>
      <el-table-column type="index" label="序号" width="102px"></el-table-column>
      <el-table-column prop="dormId" label="宿舍编号"></el-table-column>
      <el-table-column prop="dormName" label="宿舍名称"></el-table-column>
      <el-table-column label="类别">
        <template slot-scope="scope">
          <span v-if="scope.row.dormType == 2">男舍</span>
          <span v-else-if="scope.row.dormType == 3">女舍</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="small" icon="el-icon-plus" type="primary" circle @click="openAddRoom(scope.row.dormId)"></el-button>
          <el-button size="small" icon="el-icon-edit" type="warning" circle @click="handleEdit(scope.row.id)"></el-button>
          <el-button size="small" icon="el-icon-delete" type="danger" circle @click="handleDelete(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
        title="新增宿舍"
        :visible.sync="addDialogVisible"
        width="30%"
        @close="addDialogClosed">
      <!-- 内容主体区域 -->
      <el-form :model="addForm" :rules="addFormRules" ref="addRuleFormRef" label-width="80px">
        <el-form-item label="宿舍编名" prop="dormId">
          <el-input v-model="addForm.dormId"></el-input>
        </el-form-item>
        <el-form-item label="宿舍名称" prop="dormName">
          <el-input v-model="addForm.dormName"></el-input>
        </el-form-item>
        <el-form-item prop="dormType" label="宿舍类别">
          <el-select placeholder="请选择" v-model="addForm.dormType">
            <el-option
                v-for="item in dormTypeList"
                :key="item.id"
                :label="item.typeName"
                :value="item.typeId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDorm">确 定</el-button>
      </span>
    </el-dialog>

    <!--添加房间-->
    <el-dialog
        title="添加房间"
        :visible.sync="addRoomDialogVisible"
        width="30%"
        @close="addRoomDialogClosed">
      <!-- 内容主体区域 -->
      <el-form :model="addRoomForm" :rules="addRoomFormRules" ref="addRoomRuleFormRef" label-width="80px">
        <el-form-item label="房间名" prop="roomNum">
          <el-input v-model="addRoomForm.roomNum"></el-input>
        </el-form-item>
        <el-form-item label="房间人数" prop="maxNumberOfResidents">
          <el-input placeholder="默认为6" v-model="addRoomForm.maxNumberOfResidents"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="addRoomDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleAddRoom">确 定</el-button>
            </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      dormitoryList: null,
      dormTypeList: null,
      listLoading: true,
      layout: 'total, prev, pager, next, jumper',
      total: 0,
      selectRows: '',
      elementLoadingText: '正在加载...',
      queryForm: {
        pageNo: 1,
        pageSize: 10,
        departmentName: '',
      },
      addForm: {
        dormId: '',
        dormName: '',
        dormType: ''
      },
      addRoomForm: {
        roomNum: '',
        dormId: '',
        maxNumberOfResidents: ''
      },
      // 添加房间表单的验证规则对象
      addRoomFormRules: {
        roomNum: [
          {required: true, message: '房间号不可为空', trigger: 'blur'}
        ],
        dormId: [
          {required: true, message: '前选择宿舍', trigger: 'blur'}
        ],
      },
      // 添加房间表单的验证规则对象
      addFormRules: {
        dormId: [
          {required: true, message: '宿舍编号不可为空', trigger: 'blur'}
        ],
        dormName: [
          {required: true, message: '宿舍名称不可为空', trigger: 'blur'}
        ],
        dormType: [
          {required: true, message: '请选择宿舍类别', trigger: 'blur'}
        ]
      },
      addDialogVisible: false,
      addRoomDialogVisible: false,
      dId: ''
    }
  },
  created() {
    this.fetchData()
    this.getDormType()
  },
  methods: {
    setSelectRows(val) {
      this.selectRows = val
    },
    // 监听添加课件对话框的关闭事件
    addDialogClosed() {
      this.$refs.addRuleFormRef.resetFields()
    },
    // 监听添加课件对话框的关闭事件
    addRoomDialogClosed() {
      this.$refs.addRoomRuleFormRef.resetFields()
    },

    handleExpendRow(row, expandedRows) {
      // 打印父任务内容
      // console.log(row)
      //如果展开行数大于1
      if(expandedRows.length>0){
        //shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
        expandedRows.shift();
      }
    },
    tableHeaderColor(){
      // console.log(row,columnIndex,rowIndex,column)
      return 'background-color:white;color:lightslategray;font-size:14px;'

    },
    // 添加宿舍
    addDorm() {
      this.$refs.addRuleFormRef.validate(async valid => {
        if (!valid) return
        // 可以发起添加用户的网络请求
        const {data: res} = await this.$http.post('addDorm',this.addForm)
        // console.log(res)
        if (res.code != 200)
          return this.$message.error('添加失败，' + res.msg)
        this.$message.success('添加成功！')
        this.addDialogVisible = false
        await this.fetchData()
      })
    },
    // 打开添加房间的对话框
    openAddRoom(dormId) {
      this.addRoomDialogVisible = true
      // console.log(dormId)
      this.dId = dormId
    },
    // 添加房间
    handleAddRoom() {
      this.$refs.addRoomRuleFormRef.validate(async valid => {
        if (!valid) return
        // 可以发起添加用户的网络请求
        this.addRoomForm.dormId = this.dId
        const {data: res} = await this.$http.post('addRoom',this.addRoomForm)
        // console.log(res)
        if (res.code != 200)
          return this.$message.error('新增失败，' + res.msg)
        this.$message.success('房间添加成功！')
        this.addRoomDialogVisible = false
        await this.fetchData()
      })
    },
    handleEdit() {
      // TODO

    },
    // 删除
    async handleDelete(id) {
      // 提示消息
      const re = await this.$confirm('此操作将是永久性的, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch(err => err)

      // console.log(re)
      if (re != 'confirm') return this.$message.info('取消了删除')

      const {data: res} = await this.$http.get('delDorm?id='+ id)

      if (res.code != 200) return this.$message.error('删除失败！')

      this.$message.success('删除成功！')
      await this.fetchData()
    },
    handleDeleteRoom(id) {
      console.log(id)
    },
    handleSizeChange() {

    },
    handleCurrentChange() {
    },
    queryData() {
    },
    async fetchData() {
      const {data : res} = await this.$http.get('dormitories')
      // console.log(res)
      this.dormitoryList = res.data
    },
    async getDormType() {
      const {data : res} = await this.$http.get('dormType')
      // console.log(res)
      this.dormTypeList = res.data
    }
  }
}
</script>

<style lang="less" scoped>

.dormManagement-container {
  width: 98%;
  background: white;
  padding: 12px 16px 12px 16px;
}

.header-btn {
  //text-align: left;
  //display: flex;
  //justify-content: space-between;
  //align-items: center;
  //color: black;
  //font-size: 20px;

  >.editAdd {
    height: 42px;
    display: flex;
    align-items: center;
    justify-items: center;
  }
  .query {
    height: 22px;
    margin-top: 22px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
  }
}
.el-table >.el-table-column {
  height: 12px;
}


</style>
